<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background: #C7C7C7;
			}
			img{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 0px;
				top: 150px;				
			}
		</style>
	</head>
	<body>
		<input type="button"  id="btn1" value="开始跑步" />
		<input type="button"  id="btn2" value="停止跑步" />
		<img src="img/a.jpg"/ id="pc1">
	</body>
	<script type="text/javascript">
		var obtn1 = document.getElementById("btn1")
		var obtn2 = document.getElementById("btn2")
		var opc1 = document.getElementById("pc1")
		// 记录跑步的距离
		var num = 0;
		var run = null;
		obtn1.onclick = function() {
			clearInterval(run)
			run = setInterval(function() {				
				num += 10;
				opc1.style.left = num + "px"
			},100)
		}
		obtn2.onclick = function(){
			// 停止动画
			clearInterval(run)
		}
	</script>
</html>
